@import "@/styles/base/index.scss";


.join-advantage {
  .image-line {
    width: 100%;
    height: 120px;
    // background-color: #F9F6F3;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto 7.5rem;
    background-attachment: scroll;
    align-items: center;
    display: flex;
  }

  .tabs-nav {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 236px;
    line-height: 40px;
    font-size: 17px;
    font-weight: 400;
    background: #E9E4DF;
    color: #0C0C0C;

    border-radius: 7px;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .tabs-nav-item {
      cursor: pointer;
      flex: 1;
      text-align: center;

      &.active {
        color: white;
        background: #3B1364;
      }
    }


  }

  .tabs-content {
    .title {
      text-align: center;
      font-size: 40px;
      font-weight: 900;
      color: #F2C3DB;
      margin: 180px 0 120px 0;
    }

    .benefits {
      flex-wrap: wrap;
      row-gap: 79px;
      margin-top: 20px;
      padding: 0 0 130px;

      .benefit {
        flex: 1 1 33.33%;
        font-size: 20px;
        font-weight: 400;
        color: #f5f0eb;

        .benefit-title {
          font-size: 22px;
          margin-bottom: 10px;
        }

        .benefit-desc {
          line-height: 28px;
          font-size: 18px;
          color: #e9e4df;
          padding: 10px 42px 0 0;
        }
      }
    }

    .action-line {
      padding-bottom: 112px;


    }
  }
}


@media (max-width: 1023px) {

  .join-advantage {

    .tabs-content {

      .benefits {

        .benefit {
          flex: 1 1 50%;
        }
      }

    }
  }
}


@media (max-width: 480px) {

  .join-advantage {

    .tabs-content {

      .benefits {

        .benefit-icon,
        .benefit-title {
          text-align: center;
        }

        .benefit {
          flex: 1 1 100%;
          text-align: center;

          .benefit-desc {
            text-indent: 2em;
            padding-right: 0;
          }
        }

      }

    }
  }
}